<route lang="jsonc" type="page">
    {
      "layout": "tabbar",
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "视频"
		}
    }
</route>

<script lang="ts" setup>
import { useSafeAreaInsets } from '@/mixins/basic'
import { getCategory, getVideoData } from '@/api/video'
import { getEnvBaseUrl } from '@/utils'

defineOptions({
  name: 'Video',
})

const { safeAreaInsets } = useSafeAreaInsets()
const imageGroup = ref([
  { height: '195px' }, 1
])
const loading = ref(false)
const activeTab = ref(0)
const tabArr = ref([])
const videoArr = ref([])
onShow(() => {
	initData()
})

const initData = () => {
	loading.value = true
	getCategory().then(res => {
		res.unshift({
			id: 0,
			name: '全部'
		})
		tabArr.value = res
	}).catch(() => {
		loading.value = false
	})
	
	getVideoList(0)
}
// 获取视频列表
const getVideoList = (id: number) => {
	// 请求基准地址
	const baseUrl = getEnvBaseUrl()

	getVideoData(id === 0 ? undefined : {
		type_id: id
	}).then(res => {
		videoArr.value = res.map(item => {
			return {
				...item,
				url: baseUrl + item.url
			}
		})
	}).finally(() => {
		loading.value = false
	})
}

// tab 切换
const handleTab = (id: number) => {
	activeTab.value = id
	loading.value = true
	
	getVideoList(id)
}
</script>

<template>
  <view class="video-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
  	<view class="page-title">
  		<view class="title">视频</view>
  		<view class="sub-title">VIDEO</view>
  	</view>

	<view class="tabs-box">
		<view
			v-for="item in tabArr"
			:key="item.id"
			:class="['tabs-item', { active: item.id === activeTab }]"
			@click="handleTab(item.id)"
		>{{ item.name }}</view>
	</view>
	
	<view v-if="loading">
	  <wd-skeleton :row-col="imageGroup" />
	  <wd-skeleton :custom-style="{ marginTop: '20px' }" :row-col="imageGroup" />
	</view>
	
	<view v-else-if="videoArr.length > 0" class="video-list">
		<view v-for="item in videoArr" :key="item.id" class="video-item">
			<video
				controlslist="nodownload noremoteplayback disablePictureInPicture noplaybackrate"
				x5-video-player-type="h5"
				x5-video-player-fullscreen="true"
				playsinline="true"
				webkit-playsinline="true"
				x-webkit-airplay="true"
				x5-playsinline="true"
				class="video"
				:src="item.url" controls="none"
			></video>
			<view class="title">{{ item.name }}</view>
		</view>
		
		<!-- <wd-loadmore custom-class="loadmore" state="loading" /> -->
	</view>
	
	<wd-status-tip v-else image="content" tip="暂无内容" />
  </view>
</template>

<style lang="scss" scoped>
	.video-page {
		padding: 0 26px 30px 26px;
		background-color: #FCFEFF;
		
		.page-title {
			color: $uni-main-color;
			// padding-bottom: 18px;
			font-weight: 600;
			.title {
				font-size: 36px;
				line-height: 43px;
				font-family: Source Han Sans CN;
				letter-spacing: 13px;
			}
			.sub-title {
				font-size: 14px;
				line-height: 17px;
				letter-spacing: 10px;
				font-family: Source Han Sans CN;
			}
		}
		
		.tabs-box {
			padding-top: 21px;
			padding-bottom: 15px;
			border-bottom: 1px solid #E5E5E5;
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;
			&::-webkit-scrollbar {
				display: none;
			}
			
			.tabs-item {
				padding: 0 22px;
				text-align: center;
				color: #989898;
				font-family: Nunito;
				font-size: 18px;
				font-weight: 400;
				line-height: 18px;
				position: relative;
				white-space: nowrap;
				&.active {
					color: $uni-main-color;
					// border-bottom: 1px solid $uni-main-color;
					&:before {
						content: '';
						position: absolute;
						left: 0;
						bottom: -15px;
						// width: 80px;
						right: 0;
						height: 2px;
						background-color: $uni-main-color;
					}
				}
				
				& + .tabs-item {
					margin-left: 40px;
				}
			}
		}
		
		.video-list {
			.video-item {
				padding-top: 23px;
				.video {
					height: 195px;
					width: 100%;
					border-radius: 12px;
					box-shadow: 0px 16px 20px 0px rgba(214, 228, 250, 0.8);
					-ms-high-contrast-adjust:none;
					-webkit-media-controls-hide-play-button: true; /* 仅在WebKit浏览器中有效 */
				}
				
				.title {
					padding-top: 9px;
					font-size: 20px;
					font-weight: 500;
					line-height: 28px;
					color: #000;
				}
			}
		}
	}
</style>
